<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        //例子
<style>
    .box{width: 100px; height: 100px; background: pink;}
</style>
</head>
<body>


<div class="box"></div>

<script>
    // 获取 非行内 样式
    // 标准浏览器 用 getComputedStyle 即可获取
    // 关键字: window.getComputedStyle(id名或class名).属性名
    var odiv=document.querySelector('div')
	//获取到odiv下面的宽度 控制台输出100px
    // console.log(getComputedStyle(odiv).width); 		
    // console.log(getComputedStyle(odiv).height)
    // console.log(getComputedStyle(odiv).background)

    // IE浏览器获取方法
    // 关键字:currentStyle
    // 格式: currentStyle.id/class.属性名
    // var odiv=document.querySelector('div')
    // console.log(odiv.currentStyle.width)
    // console.log(odiv.currentStyle.width)
    // odiv.currentStyle.width

    // console.log(getStyle(odiv,width))
    // console.log(getStyle(odiv,odiv.width))
    // width = getComputedStyle(odiv).width
    // console.log(getStyle(odiv,width))
    console.log(getStyle(odiv,'width'))
    
    // function getStyle(ele,age) {
    //     // 判断浏览器有没有这个  自带的 方法
    //     if(window.getComputedStyle) {
    //         // 这里因为获取的是形参的变量 所以要用中括号
    //         return getComputedStyle(ele)[age]
    //     }else{
    //         return ele.currentStyle.age
    //     }
    // }

    function getStyle(ele,age) {
        if(window.getComputedStyle) {
            return getComputedStyle(ele)[age]
        }
    }

    // document.getElementById
    // document.getElementsByClassName
    // document.querySelectorAll
    // getComputedStyle
    // document.querySelector
    // document.getElementsByTagName
    
</script>
    
</body>
</html>